<template>
  <div>
    <userSearch :isshow-role="isshowRole" user="人员搜索">
      <template #input>
        人员搜索: <el-input v-model.trim="userName" placeholder="请输入" class="search" />
      </template>
      <template #SearchBtn>
        <el-button class="btn" @click="searchUser">查询</el-button>
      </template>
    </userSearch>
    <!-- 作用域插槽 接收子组件的值 scope.子组件的属性名 -->
    <el-card>
      <Table :table-list="tableList" :table-label-list="tableLabelList" :page="page" :total="+total" :total-page="+totalPage" @del="delRole" @edit="edit" @getRoleList="getRoleList" @addRole="addRole">
        <template #newBtn>
          <el-button class="newBtn" size="small" icon="el-icon-plus" @click="addRole">新增角色</el-button>
        </template>
        <template #option="scope">
          <el-button class="revise" type="text">
            <span @click="edit(scope.row.userName)">修改</span>
          </el-button>
          <el-button type="text" style="border:0px">
            <span style="color:red" @click="delRole(scope.row.id)">删除</span>
          </el-button>
        </template>
        <template #pager>
          <span>共{{ total }}条记录</span>
          <span>第{{ page.pageIndex }}/{{ totalPage }}页</span>
        </template>
      </Table>
    </el-card>

    <!-- <userTable :table-list="tableList" :page="page" :total="+total" :total-page="+totalPage" @del="delRole" @edit="edit" @getRoleList="getRoleList" @addRole="addRole" /> -->
    <addRole ref="addRole" :title="title" :dialog-form-visible.sync="dialogFormVisible" />
  </div>
</template>

<script>
import Table from './components/table.vue'
// import userTable from './components/user-table.vue'
import addRole from './components/addRole.vue'
import userSearch from './components/user-search.vue'
import { getUserSearchApi, DelUserApi } from '@/api/user'
export default {
  components: { addRole, userSearch, Table },
  data() {
    return {
      tableList: [],
      tableLabelList: [
        { label: '人员名称', prop: 'userName', width: 240 },
        { label: '归属地区', prop: 'regionName', width: 200 },
        { label: '角色', prop: 'role.roleName', width: 180 },
        { label: '联系电话', prop: 'mobile', width: 200 }
      ],
      page: {
        // 放置页码及相关数据
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      totalPage: 0,
      tableData: {},
      dialogFormVisible: false,
      isshowRole: false,
      title: '新增人员',
      userName: ''

    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 获取列表数据
    async  getRoleList() {
      const { data: { currentPageRecords, totalCount, totalPage }} = await getUserSearchApi(this.page)
      this.tableList = currentPageRecords
      this.total = totalCount
      this.totalPage = totalPage
      // 问题：如果一个页面的数据刚好删除完之后 会显示暂无数据 这时候要重新刷新页面显示上一页的数据才合理
      // 处理： 判断 总数是否大于0 且 row有长度
      if (totalCount > 0 && currentPageRecords.length === 0) {
        this.page.pageIndex--
        this.getRoleList()
      }
    },
    // 删除用户
    async delRole(id) {
      try {
        // 调用删除得接口
      // 重新获取数据
        await this.$confirm('是否删除该人员?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await DelUserApi(id)
        this.getRoleList()
      } catch (error) {
        console.log(error)
      }
    },
    // 修改用户
    async edit(name) {
      this.dialogFormVisible = true
      this.title = '编辑人员'
      const { data } = await getUserSearchApi({ userName: name })
      console.log(data)
      this.$refs.addRole.form = data.currentPageRecords[0]
    },
    // 新增角色
    addRole() {
      this.dialogFormVisible = true
    },
    // 搜索
    async searchUser() {
      // console.log(userName)
      // 如果 userName为空
      const { data: { currentPageRecords, totalCount, totalPage }} = await getUserSearchApi({ userName: this.userName })
      this.tableList = currentPageRecords
      this.total = +totalCount
      this.totalPage = totalPage
      // this.tableList = value
    }
  }
}
</script>

<style>

</style>
